<!--
  ~ /*
  ~  *    Copyright 2020-2021 luter.me
  ~  *
  ~  *    Licensed under the Apache License, Version 2.0 (the "License");
  ~  *    you may not use this file except in compliance with the License.
  ~  *    You may obtain a copy of the License at
  ~  *
  ~  *      http://www.apache.org/licenses/LICENSE-2.0
  ~  *
  ~  *    Unless required by applicable law or agreed to in writing, software
  ~  *    distributed under the License is distributed on an "AS IS" BASIS,
  ~  *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  *    See the License for the specific language governing permissions and
  ~  *    limitations under the License.
  ~  */
  -->

<!DOCTYPE html>
<html lang="zh-CN" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="~{/pages/tpl/layout.html}">
<head>
    <meta charset="UTF-8">
    <title>注解权限</title>
</head>
<body>
<section id="app" layout:fragment="content" class="container">
    <div class="row">
        <div class="col">
            public String toIndex(@CurrentToken SimpleToken token)
            注解获取到的 token:
            <hr>
            <code th:text="${pageToken}"></code>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-5">
            <button @click="request('get','/anno/list')" class="btn btn-primary">列表</button>
            <button @click="request('get','/anno/detail')" class="btn btn-secondary">详情</button>
            <button @click="request('post','/anno/save')" class="btn btn-success">新增</button>
            <button @click="request('post','/anno/update')" class="btn btn-info">修改</button>
            <button @click="request('post','/anno/delete')" class="btn btn-danger">删除</button>
        </div>
        <div class="col-7">
            <p>
            <h3>请求结果</h3></p>
            <hr>
            <template>
                <div class="bg-dark p-2">
                    <code :style="{color:color}">{{result}}</code>
                </div>
            </template>
        </div>
    </div>

</section>


<script layout:fragment="script">
    const app = new Vue({
        el: '#app',
        data: {
            result: '',
            color: "white",
        },
        methods: {
            request(method, url) {
                axios({
                    headers: {
                        "Content-Type": "application/json"
                    },
                    method: method || 'get',
                    url: url || '',
                }).then(function (response) {
                    app.result = response.data
                    app.color = "chartreuse";
                }).catch(function (error) {
                    app.color = "red";
                    if (error.response) {
                        app.result = error.response.data;
                    } else if (error.request) {
                        console.log(error.request);
                    } else {
                        console.log('Error', error.message);
                    }
                    console.log(error.config);
                });
            }
        }
    })
</script>
</body>
</html>